---
name: Transitions
menu: Usage
route: /usage/transitions
---

import { Playground } from 'docz';
import { useState } from 'react';

import ReactWordcloud from '../react-wordcloud';
import words from '../words';

# Transitions

`react-wordcloud` handles updating D3 transitions when `words`, `size` and `options` prop change. The following example demonstrates this behavior.

<Playground>
  {() => {
    const [optionsFlag, toggleOptionsFlag] = useState(false);
    const [wordsFlag, toggleWordsFlag] = useState(false);
    const options = optionsFlag ? undefined : { fontFamily: 'impact' };
    const updatedWords = wordsFlag ? words : words.slice(0, 50);
    return (
      <>
        <button onClick={() => toggleOptionsFlag(!optionsFlag)}>
          Update options
        </button>
        <button onClick={() => toggleWordsFlag(!wordsFlag)}>
          Update words
        </button>
        <ReactWordcloud words={updatedWords} options={options} />
      </>
    );
  }}
</Playground>
